<template>
	<view class="appointment-box">
		<view class="form" >
			<u-form :model="form" ref="uForm" :label-style="{'paddingLeft':'10rpx'}">
				<view class="item-box">
					<u-form-item label="当前余额" prop="currentBalance">
						<view class="wd-100 fs-38" style="color:#2979ff;font-weight: 700;text-align: right;">{{form.currentBalance}}</view>
					</u-form-item>
					<u-form-item label="其它金额" prop="otherAmount">
						<u-input type="number" placeholder="请输入充值金额" :maxlength="11" v-model="form.otherAmount" @click="keyboardShow = true"/>
						<u-keyboard ref="uKeyboard" :tooltip="false" v-model="keyboardShow" @change="curKeyBoard"></u-keyboard>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="po-but">
			<u-button type="primary" shape="circle">立即充值</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyboardShow:false,
				labelWidth: 0, // 初始值为 0
				form: {
					currentBalance: '0.00',
					otherAmount: '',
				},
				show: false,
		
				selectBol: {
					come: false,
					visit: false,
					pree: false
				},
				picker: {
					star: false,
					end: false
				},
				customStyle: {
					borderRadius: '50rpx',
					textAlign: 'center',
					padding: '7rpx 20rpx'
				}
			}
		},
		mounted() {
			
		},
		methods: {
			curKeyBoard(e){
				this.form['otherAmount']+=e
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	
	}
</script>

<style lang="scss" scoped>
	.appointment-box{
		height: calc(100vh - 250rpx);
		overflow: auto;
	}
	.po-but {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 30rpx 20rpx;
		box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.2);
	}

	.item-box {
		position: relative;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		background-color: #fff;

		&.visit {
			display: flex;
			justify-content: space-between;
		}

		.jt-center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: no-repeat;
		}

		.item-text {
			line-height: 85rpx;
			text-align: center;
			color: $-color-but-wy+30;
		}
	}

	.cp-flex {
		display: flex;
	}

	.but-right {
		border: 1px solid $-color-but-wy;
		color: $-color-but-wy;
		border-radius: 50rpx;
		text-align: center;
		padding: 7rpx 20rpx;
	}

	/deep/.u-form-item {
		padding: 10rpx 10rpx 10rpx 0;

		.u-form-item--left__content__label {
			padding: 0 !important;
		}
		.u-form-item--left{
			flex:0 0 auto !important;
			width: 160rpx !important;
		}
		.u-form-item__message{
			padding-left: 160rpx !important;
		}
	}
</style>